<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, viewport-fit=cover">
    <style>
      * { touch-action: pan-y;
          -webkit-touch-callout:default;
          -webkit-user-select:auto;
      }
      body {
          background-color: #fff !important;
          height: 100%;
          padding-bottom: env(safe-area-inset-bottom,20px)
      }
      .van-notify {
          padding: 40px 0 20px !important;
          font-size: 17px !important;
      }
      .van-toast {
          z-index: 9999 !important;
      }
      .el-popover {
          padding: 0 !important;
      }
      .el-select-dropdown {
          z-index: 2500 !important;
      }
      #app, #app span {
          -webkit-user-select:text;
          -moz-user-select:text;
          -ms-user-select:text;
          user-select:text;
      }
      .loading3{
          width:30px;
          height:30px;
          margin:50px auto;
          position:relative;
      }
      .circle{
          position:absolute;
          top:0;
          left:0;
          width:100%;
          height:100%;
      }
      .circle span{
          width:8px;
          height:8px;
          display:inline-block;
          background:#67CF22;
          border-radius: 100%;
          position:absolute;
          -webkit-animation: mycircle 1.2s infinite ease-in-out;
          animation: mycircle 1.2s infinite ease-in-out;
          -webkit-animation-fill-mode:both;
          animation-fill-mode:both;
      }
      .circle2{
          -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
      }
      .circle3{
          -webkit-transform: rotateZ(90deg);
          transform: rotateZ(90deg);
      }
      .circle>span:nth-child(1){
          top:0;
          left:0;
      }
      .circle>span:nth-child(2){
          top:0;
          right:0;
      }
      .circle>span:nth-child(3){
          right:0;
          bottom:0;
      }
      .circle>span:nth-child(4){
          left:0;
          bottom:0;
      }
      .circle2 >span:nth-child(1){
          -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
      }
      .circle3 >span:nth-child(1){
          -webkit-animation-delay: -1.0s;
          animation-delay: -1.0s;
      }
      .circle1 >span:nth-child(2){
          -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
      }
      .circle2 >span:nth-child(2){
          -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
      }
      .circle3 >span:nth-child(2){
          -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
      }
      .circle1 >span:nth-child(3){
          -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
      }
      .circle2 >span:nth-child(3){
          -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
      }
      .circle3 >span:nth-child(3){
          -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
      }
      .circle1 >span:nth-child(4){
          -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
      }
      .circle2 >span:nth-child(4){
          -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
      }
      .circle3 >span:nth-child(4){
          -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
      }
      @-webkit-keyframes mycircle{
          0%{transform:scale(0.0);}
          40%{transform:scale(1.0);}
          80%{transform:scale(0.0);}
          100%{transform:scale(0.0);}
      }
      @keyframes mycircle{
          0%{transform:scale(0.0);}
          40%{transform:scale(1.0);}
          80%{transform:scale(0.0);}
          100%{transform:scale(0.0);}
      }
      .loading-content {
          height: 88vh;
          display: flex;
          justify-content: center;
          align-items: center;
      }
      @-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}
      .animated{-webkit-animation-duration:.7s;animation-duration:.7s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
      .cardShow { opacity: 1 !important; }
      @keyframes goRight {
          0% {
              opacity: 0;
              transform: translateX(80px);
          }
          60% {
              opacity: .9;
              transform: translateX(-10px);
          }
          100% {
              opacity: 1;
              transform: translateX(0);
          }
      }
    </style>
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
		<title><%= htmlWebpackPlugin.options.title %></title>
	</head>
	<body>
    <div id="app">
      <div class="loading-content">
        <div class="loading3">
          <div class="circle circle1">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
          <div class="circle circle2">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
          <div class="circle circle3">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
        <h2 style="position: absolute; top: 50%;left: 39%;">Loading...</h2>
      </div>
    </div>
    <script src="https://cdn.bootcss.com/vConsole/3.2.2/vconsole.min.js"></script>
    <script src="https://at.alicdn.com/t/font_1791257_iqgao9u39kf.js" async></script>
    <script src="https://g.alicdn.com/mtb/lib-windvane/3.0.0/windvane.js"></script>
	</body>
</html>
